.threeD-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  
  video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持宽高比的同时填充整个容器 */
    top: 0;
    left: 0;
    z-index: 11;
  }
}

// 为宽屏设备优化视频位置
@media screen and (min-width: 1600px) {
  .threeD-container {
    video {
      // 对于超宽屏，可以调整视频的对齐方式
      object-position: center center;
    }
  }
}

// 为高度较小的屏幕优化
@media screen and (max-height: 768px) {
  .threeD-container {
    video {
      // 对于高度较小的屏幕，确保视频不会被过度裁剪
      object-position: center top;
    }
  }
}

// 移动设备优化
@media screen and (max-width: 768px) {
  .threeD-container {
    video {
      // 移动设备上可能需要不同的适配方式
      object-position: center center;
    }
  }
}

.bg-137 {
  background-image: url("../../../../../public/images/137.png");
}

.bg-136 {
  background-image: url("../../../../../public/images/136.png");
}

.bg {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  background-image: url("../../../../../public/images/bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Tab容器位置样式 */
.tab-container {
  position: absolute;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  justify-content: center;
  width: 12rem;
}
